<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>个人赛 - iPad适配</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2878267_rd7xl5u0kck.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    
    body {
      background-color: #f0f4f8;
      color: #303133;
      min-height: 100vh;
      overflow-x: hidden;
    }
    
    .ipad-container {
      max-width: 1024px;
      margin: 0 auto;
      background: linear-gradient(135deg, #f0f4f8 0%, #d7e3f0 100%);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    
    /* 顶部导航栏样式 */
    .nav-tabs {
      display: flex;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(228, 232, 236, 0.8);
      padding: 0;
      position: relative;
      z-index: 20;
    }
    
    .nav-tabs::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #3498db, #2c82c9, #1abc9c);
      z-index: 1;
    }
    
    .nav-tab {
      padding: 16px 24px;
      font-size: 16px;
      font-weight: 500;
      color: #606266;
      position: relative;
      cursor: pointer;
      transition: all 0.3s;
      text-align: center;
      flex: 1;
    }
    
    .nav-tab.active {
      color: #409EFF;
      font-weight: 600;
    }
    
    .nav-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: #409EFF;
      border-radius: 3px 3px 0 0;
    }
    
    .nav-tab-icon {
      margin-right: 8px;
      font-size: 18px;
      vertical-align: middle;
    }
    
    /* 系统标题样式 - 美化版 */
    .system-title {
      text-align: center;
      padding: 24px;
      position: relative;
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(228, 232, 236, 0.8);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .title-center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 1;
    }
    
    .subtitle {
      font-size: 14px;
      color: #7f8c8d;
      font-weight: 500;
      letter-spacing: 1px;
      margin-bottom: 6px;
      text-transform: uppercase;
    }
    
    .main-title {
      font-size: 26px;
      font-weight: 700;
      color: #2c3e50;
      position: relative;
      padding: 0 15px;
    }
    
    .main-title::before,
    .main-title::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 30px;
      height: 2px;
      background: linear-gradient(90deg, #3498db, rgba(52, 152, 219, 0));
      transform: translateY(-50%);
    }
    
    .main-title::before {
      left: -20px;
    }
    
    .main-title::after {
      right: -20px;
      background: linear-gradient(90deg, rgba(52, 152, 219, 0), #3498db);
    }
    
    /* 控制按钮组 - 美化版 */
    .control-panel {
      display: flex;
      gap: 15px;
      z-index: 5;
    }
    
    .control-btn {
      padding: 10px 18px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: none;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
    }
    
    .control-btn::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
      z-index: 0;
    }
    
    .control-btn i {
      position: relative;
      z-index: 1;
      font-size: 16px;
    }
    
    .control-btn span {
      position: relative;
      z-index: 1;
    }
    
    .control-btn.primary {
      background: linear-gradient(135deg, #409EFF 0%, #36acfe 100%);
      color: white;
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    }
    
    .control-btn.primary:hover {
      box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
      transform: translateY(-2px);
    }
    
    .control-btn.success {
      background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
      color: white;
      box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
    }
    
    .control-btn.success:hover {
      box-shadow: 0 6px 16px rgba(103, 194, 58, 0.4);
      transform: translateY(-2px);
    }
    
    .control-btn.danger {
      background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
      color: white;
      box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
    }
    
    .control-btn.danger:hover {
      box-shadow: 0 6px 16px rgba(245, 108, 108, 0.4);
      transform: translateY(-2px);
    }
    
    /* 连接状态样式 */
    .connection-status {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.8);
      font-size: 14px;
      color: #606266;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(228, 232, 236, 0.8);
      z-index: 5;
    }
    
    .status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #67c23a;
      box-shadow: 0 0 8px #67c23a;
      animation: pulse 1.5s infinite;
    }
    
    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.6);
      }
      70% {
        box-shadow: 0 0 0 6px rgba(103, 194, 58, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(103, 194, 58, 0);
      }
    }
    
    .main-content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    /* 数据卡片区域 */
    .data-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 0;
    }
    
    .data-card {
      background: white;
      border-radius: 16px;
      padding: 20px;
      height: 150px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
    }
    
    .data-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%);
      pointer-events: none;
    }
    
    .time-card {
      border-left: 4px solid #409EFF;
      background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    }
    
    .pile-card {
      border-left: 4px solid #e6a23c;
      background: linear-gradient(135deg, #ffffff 0%, #fff9f0 100%);
    }
    
    .land-card {
      border-left: 4px solid #f56c6c;
      background: linear-gradient(135deg, #ffffff 0%, #fff0f0 100%);
    }
    
    .card-icon {
      font-size: 24px;
      margin-bottom: 10px;
      color: #409EFF;
      background: rgba(64, 158, 255, 0.1);
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
    }
    
    .pile-card .card-icon {
      color: #e6a23c;
      background: rgba(230, 162, 60, 0.1);
    }
    
    .land-card .card-icon {
      color: #f56c6c;
      background: rgba(245, 108, 108, 0.1);
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px;
    }
    
    .edit-button {
      font-size: 14px;
      color: #409EFF;
      background: none;
      border: none;
      cursor: pointer;
    }
    
    .card-label {
      font-size: 14px;
      color: #909399;
      margin-bottom: 10px;
      font-weight: 500;
    }
    
    .card-value {
      font-size: 36px;
      font-weight: 700;
      color: #303133;
      line-height: 1.2;
    }
    
    .unit {
      font-size: 14px;
      color: #909399;
      font-weight: 400;
      margin-left: 4px;
    }
    
    /* 桩桶可视化组件 - 从ConesVisualizer.vue引入的样式 */
    .cones-visualizer-container {
      margin-top: 40px;
    }
    
    .visualizer-card {
      background: white;
      border-radius: 20px;
      padding: 35px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(228, 232, 236, 0.8);
      transition: all 0.3s ease;
      border-left: 4px solid #409EFF;
      background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    }
    
    .visualizer-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    }
    
    .visualizer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      position: relative;
      z-index: 1;
    }
    
    .header-title {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    
    .title-text {
      font-size: 26px;
      color: #303133;
      font-weight: 600;
      position: relative;
      padding-left: 15px;
    }
    
    .title-text::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 5px;
      height: 25px;
      background: linear-gradient(135deg, #409EFF 0%, #36acfe 100%);
      border-radius: 3px;
    }
    
    .statistics {
      display: flex;
      gap: 15px;
    }
    
    .stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 15px;
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      transition: all 0.3s;
    }
    
    .stat.passed {
      background: rgba(103, 194, 58, 0.1);
    }
    
    .stat.online {
      background: rgba(64, 158, 255, 0.1);
    }
    
    .stat.offline {
      background: rgba(144, 147, 153, 0.1);
    }
    
    .stat.remaining {
      background: rgba(230, 162, 60, 0.1);
    }
    
    .stat-value {
      font-size: 20px;
      font-weight: 700;
    }
    
    .stat.passed .stat-value {
      color: #67c23a;
    }
    
    .stat.online .stat-value {
      color: #409EFF;
    }
    
    .stat.offline .stat-value {
      color: #909399;
    }
    
    .stat.remaining .stat-value {
      color: #e6a23c;
    }
    
    .stat-label {
      font-size: 12px;
      color: #909399;
    }
    
    .header-controls {
      display: flex;
      gap: 10px;
    }
    
    .visualizer-content {
      position: relative;
      height: 180px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 15px;
      border: 1px dashed #d4e2f9;
      overflow: hidden;
      margin-bottom: 20px;
    }
    
    .track-container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    .track-path {
      position: absolute;
      top: 50%;
      left: 5%;
      width: 90%;
      height: 1px;
      background-color: rgba(64, 158, 255, 0.3);
      border: none;
      z-index: 1;
    }
    
    .track-start-label, .track-end-label {
      position: absolute;
      top: calc(50% + 15px);
      font-size: 14px;
      color: #909399;
      font-weight: 500;
    }
    
    .track-start-label {
      left: 5%;
      transform: translateX(-50%);
    }
    
    .track-end-label {
      right: 5%;
      transform: translateX(50%);
    }
    
    .cone-item {
      position: absolute;
      width: 30px;
      height: 40px;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      transition: all 0.3s ease;
      z-index: 2;
      cursor: pointer;
    }
    
    .cone-body {
      width: 22px;
      height: 22px;
      background: #67c23a;
      border-radius: 50%; 
      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
      position: relative;
      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(0, 0, 0, 0.1);
      z-index: 5;
    }
    
    .cone-item.passed .cone-body {
      background: linear-gradient(145deg, #4facfe, #00f2fe) !important;
      transform: scale(1.15);
      box-shadow: 0 0 12px rgba(79, 172, 254, 0.7);
      border: 1px solid rgba(79, 172, 254, 0.6);
    }
    
    .cone-item.missed .cone-body {
      background: linear-gradient(145deg, #ff6b6b, #f56c6c) !important;
      transform: scale(1.05);
      box-shadow: 0 0 12px rgba(245, 108, 108, 0.7);
      border: 1px solid rgba(245, 108, 108, 0.6);
    }
    
    .cone-item.kicked .cone-body {
      background: linear-gradient(145deg, #ffa53e, #e6a23c) !important;
      transform: scale(1.05);
      box-shadow: 0 0 12px rgba(230, 162, 60, 0.7);
      border: 1px solid rgba(230, 162, 60, 0.6);
    }
    
    .cone-item.no-receive .cone-body {
      background: linear-gradient(145deg, #a0a3a8, #909399) !important;
      transform: scale(1.05);
      box-shadow: 0 0 12px rgba(144, 147, 153, 0.7);
      border: 1px solid rgba(144, 147, 153, 0.6);
    }
    
    .cone-item.offline .cone-body {
      background: #909399 !important;
      filter: grayscale(0.7) brightness(0.85);
      transform: scale(0.95);
      box-shadow: none;
      border: 1px solid rgba(144, 147, 153, 0.3);
      opacity: 0.7;
    }
    
    .cone-item.flow-light .cone-body {
      background: linear-gradient(145deg, #ffbc1f, #ff7e00) !important;
      transform: scale(1.3);
      box-shadow: 0 0 15px rgba(255, 170, 0, 0.6);
      border: 1px solid rgba(255, 126, 0, 0.7);
    }
    
    .cone-item .cone-number {
      position: absolute;
      top: -20px;
      font-size: 12px;
      font-weight: bold;
      color: #303133;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      z-index: 8;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.8);
    }
    
    .cone-item.passed .cone-number {
      color: #409EFF;
      background: rgba(255, 255, 255, 0.95);
      border-color: #409EFF;
      font-weight: 700;
    }
    
    .cone-item.missed .cone-number {
      color: #F56C6C;
      background: rgba(255, 255, 255, 0.95);
      border-color: #F56C6C;
    }
    
    .cone-item.kicked .cone-number {
      color: #E6A23C;
      background: rgba(255, 255, 255, 0.95);
      border-color: #E6A23C;
    }
    
    .cone-item.offline .cone-number {
      opacity: 0.7;
      color: #909399;
      background: rgba(240, 240, 240, 0.8);
      border-color: rgba(144, 147, 153, 0.3);
    }
    
    .cone-item.passed.flow-light .cone-body {
      transform: scale(1.3) !important;
    }
    
    .cone-item.offline .cone-body {
      transform: scale(0.95) !important;
      animation: none !important;
      box-shadow: none !important;
      border: 1px solid rgba(0, 0, 0, 0.1) !important;
      background: #909399 !important;
    }
    
    .cone-item.flow-light .cone-effect {
      position: absolute;
      bottom: -4px;
      width: 18px;
      height: 4px;
      background: rgba(0, 0, 0, 0.15);
      border-radius: 50%;
      filter: blur(1px);
      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
      z-index: 4;
    }
    
    .cone-item.passed .cone-effect {
      width: 22px;
      background: rgba(79, 172, 254, 0.25);
      filter: blur(2px);
    }
    
    .cone-item.offline .cone-effect {
      opacity: 0.3;
      width: 16px;
    }
    
    .cone-item.passed {
      z-index: 10;
    }
    
    .cone-item.missed {
      z-index: 9;
    }
    
    .cone-item.kicked {
      z-index: 8;
    }
    
    .cone-item.offline.passed .cone-body,
    .cone-item.offline.missed .cone-body,
    .cone-item.offline.kicked .cone-body,
    .cone-item.offline.no-receive .cone-body,
    .cone-item.offline.flow-light .cone-body {
      background: #909399 !important;
      transform: scale(0.95) !important;
      animation: none !important;
      box-shadow: none !important;
      border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    
    .connection-status {
      position: absolute;
      top: -10px;
      right: -10px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #f56c6c;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 8px;
      border: 2px solid white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      z-index: 7;
      transition: all 0.3s ease;
    }
    
    .connection-status .status-icon {
      font-size: 8px;
      opacity: 0.6;
    }
    
    .connection-status.online {
      background: #67c23a;
      animation: pulse-online 2s infinite;
    }
    
    .connection-status.online .status-icon {
      opacity: 1;
    }
    
    @keyframes pulse-online {
      0% {
        box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.4);
      }
      70% {
        box-shadow: 0 0 0 6px rgba(103, 194, 58, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(103, 194, 58, 0);
      }
    }
    
    .visualizer-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 5px;
    }
    
    .legend {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
    
    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .legend-marker {
      width: 15px;
      height: 15px;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
    
    .legend-text {
      font-size: 14px;
      color: #606266;
      transition: all 0.3s ease;
    }
    
    .legend-marker.passed {
      background: linear-gradient(145deg, #4facfe, #00f2fe);
    }
    
    .legend-marker.missed {
      background: linear-gradient(145deg, #ff6b6b, #f56c6c);
    }
    
    .legend-marker.kicked {
      background: linear-gradient(145deg, #ffa53e, #e6a23c);
    }
    
    .legend-marker.no-receive {
      background: linear-gradient(145deg, #a0a3a8, #909399);
      position: relative;
    }
    
    .legend-marker.no-receive::after {
      content: '!';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-weight: bold;
      font-size: 10px;
    }
    
    .legend-marker.online {
      background: #67c23a;
    }
    
    .legend-marker.offline {
      background: #909399;
    }
    
    .legend-item:hover .legend-marker {
      transform: scale(1.1);
    }
    
    .legend-item:hover .legend-text {
      color: #409EFF;
    }
    
    .cone-item .cone-effect {
      position: absolute;
      bottom: -4px;
      width: 18px;
      height: 4px;
      background: rgba(0, 0, 0, 0.15);
      border-radius: 50%;
      filter: blur(1px);
      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
      z-index: 4;
    }
    
    .cone-item.no-receive .cone-body::after {
      content: '!';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-weight: bold;
      font-size: 14px;
    }
    
    /* 确保所有可能的样式冲突被正确处理 */
    .cone-item *,
    .cone-item.passed *,
    .cone-item.missed *,
    .cone-item.kicked *,
    .cone-item.no-receive *,
    .cone-item.offline * {
      box-sizing: border-box;
      line-height: normal;
    }
    
    @media (max-width: 992px) {
      .visualizer-content {
        height: 160px;
      }
      
      .header-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      
      .statistics {
        flex-wrap: wrap;
      }
      
      .cone-item {
        width: 26px;
        height: 36px;
      }
      
      .cone-body {
        width: 22px;
        height: 22px;
      }
    }
    
    @media (max-width: 768px) {
      .visualizer-content {
        height: 140px;
        padding: 10px;
      }
      
      .visualizer-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
      }
      
      .header-controls {
        align-self: flex-end;
      }
      
      .visualizer-footer {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
      }
      
      .cone-item {
        width: 25px;
        height: 32px;
      }
      
      .cone-body {
        width: 20px;
        height: 20px;
      }
      
      .connection-status {
        width: 14px;
        height: 14px;
        top: -8px;
        right: -8px;
      }
      
      .connection-status .status-icon {
        font-size: 6px;
      }
    }
    
    .skater-position {
      position: absolute;
      transform: translate(-50%, -50%);
      z-index: 11;
    }
    
    .skater-icon {
      width: 24px;
      height: 24px;
      background-color: #409EFF;
      border-radius: 50%;
      border: 3px solid white;
      box-shadow: 0 0 10px rgba(64, 158, 255, 0.6);
      animation: skater-pulse 1.5s infinite alternate;
    }
    
    @keyframes skater-pulse {
      from {
        transform: scale(0.9);
        box-shadow: 0 0 10px rgba(64, 158, 255, 0.6);
      }
      to {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(64, 158, 255, 0.8);
      }
    }
    
    /* 统一的标题样式 - 与桩桶可视化标题保持一致 */
    .section-title {
      font-size: 26px;
      color: #303133;
      font-weight: 600;
      position: relative;
      padding-left: 15px;
      margin-bottom: 15px;
    }
    
    .section-title::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 5px;
      height: 25px;
      background: linear-gradient(135deg, #409EFF 0%, #36acfe 100%);
      border-radius: 3px;
    }
    
    /* 修改最终成绩为纯文本形式 */
    .final-result-text {
      margin-bottom: 0;
      padding: 25px 30px;
      background-color: #fff;
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
      border-left: 4px solid #409EFF;
      background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
      text-align: center;
    }
    
    .result-section h3 {
      font-size: 26px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 20px;
      display: inline-block;
      position: relative;
      padding-left: 15px;
      text-align: left;
    }
    
    .result-section h3::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 5px;
      height: 25px;
      background: linear-gradient(135deg, #409EFF 0%, #36acfe 100%);
      border-radius: 3px;
    }
    
    .status-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      margin-left: 10px;
      color: white;
    }
    
    .status-badge.valid {
      background-color: #67c23a;
    }
    
    .status-badge.invalid {
      background-color: #f56c6c;
    }
    
    .final-score-value {
      font-size: 42px;
      font-weight: 700;
      color: #409EFF;
      margin: 15px 0;
      text-align: center;
      font-family: 'Courier New', monospace;
    }
    
    .score-note {
      font-size: 14px;
      color: #909399;
      text-align: center;
    }
    
    /* 修改成绩记录为纯文本表格 */
    .records-section {
      padding: 25px 30px;
      background-color: #fff;
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
      margin-bottom: 0;
      border-left: 4px solid #409EFF;
      background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    }
    
    .records-title {
      font-size: 26px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 20px;
      display: inline-block;
      position: relative;
      padding-left: 15px;
    }
    
    .records-title::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 5px;
      height: 25px;
      background: linear-gradient(135deg, #409EFF 0%, #36acfe 100%);
      border-radius: 3px;
    }
    
    .simple-button {
      float: right;
      padding: 6px 12px;
      background-color: #409EFF;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 13px;
      cursor: pointer;
    }
    
    .records-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 15px;
      font-size: 13px;
    }
    
    .records-table th, 
    .records-table td {
      text-align: left;
      padding: 10px 8px;
      border-bottom: 1px solid #ebeef5;
    }
    
    .records-table th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 500;
    }
    
    .records-table .time-value {
      font-family: monospace;
      color: #606266;
    }
    
    .records-table .penalty-value {
      color: #e6a23c;
      font-family: monospace;
    }
    
    .records-table .final-score {
      color: #409EFF;
      font-weight: 600;
      font-family: monospace;
    }
    
    .records-table .final-score.invalid {
      color: #f56c6c;
    }
    
    .records-table .status {
      color: #67c23a;
    }
    
    .records-table .status.invalid {
      color: #f56c6c;
    }
    
    .delete-btn {
      padding: 2px 8px;
      background: none;
      border: none;
      color: #f56c6c;
      cursor: pointer;
      font-size: 13px;
    }
    
    .delete-btn:hover {
      text-decoration: underline;
    }
    
    /* 自定义桩桶起点终点标签 */
    .track-start-label, .track-end-label {
      font-size: 12px;
      color: #606266;
    }
    
    /* 美化按钮样式 */
    .header-control-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      cursor: pointer;
      transition: all 0.3s;
      color: white;
      font-size: 16px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    .reset-btn {
      background: linear-gradient(135deg, #409EFF 0%, #36acfe 100%);
    }
    
    .reset-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(64, 158, 255, 0.3);
    }
    
    .edit-btn {
      background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
    }
    
    .edit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(144, 147, 153, 0.3);
    }
    
    .edit-btn.active {
      background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
      box-shadow: 0 6px 15px rgba(103, 194, 58, 0.3);
    }
  </style>
</head>
<body>
  <div class="ipad-container">
    <!-- 顶部导航栏 -->
    <div class="nav-tabs">
      <div class="nav-tab active">
        <i class="el-icon-data-line nav-tab-icon"></i>
        <span class="nav-tab-text">个人赛</span>
      </div>
      <div class="nav-tab" onclick="window.location.href='video-playback.html'">
        <i class="el-icon-video-camera nav-tab-icon"></i>
        <span class="nav-tab-text">视频回放</span>
      </div>
    </div>
    
    <!-- 系统标题 -->
    <div class="system-title">
      <div class="connection-status">
        <span class="status-dot"></span>
        <span>系统已连接</span>
      </div>
      
      <div class="title-center">
        <div class="subtitle">轮滑速度过桩</div>
        <h1 class="main-title">个人赛</h1>
      </div>
      
      <div class="control-panel">
        <button class="control-btn success">
          <i class="el-icon-video-play"></i>
          <span>开始计时</span>
        </button>
        <button class="control-btn danger">
          <i class="el-icon-video-pause"></i>
          <span>结束计时</span>
        </button>
        <button class="control-btn primary">
          <i class="el-icon-refresh"></i>
          <span>重置系统</span>
        </button>
      </div>
    </div>
    
    <main class="main-content">
      <div class="data-cards">
        <div class="data-card time-card">
          <div class="card-icon">
            <i class="el-icon-timer"></i>
          </div>
          <div class="card-label">用时</div>
          <div class="card-value">
            12.345
            <span class="unit">秒</span>
          </div>
        </div>
        
        <div class="data-card pile-card">
          <div class="card-header">
            <div class="card-icon">
              <i class="el-icon-warning"></i>
            </div>
            <button class="edit-button">修改</button>
          </div>
          <div class="card-label">漏桩踢桩数量</div>
          <div class="card-value">
            2
            <span class="unit">个</span>
          </div>
        </div>
        
        <div class="data-card land-card">
          <div class="card-header">
            <div class="card-icon">
              <i class="el-icon-position"></i>
            </div>
            <button class="edit-button">修改</button>
          </div>
          <div class="card-label">浮脚落地</div>
          <div class="card-value">
            否
          </div>
        </div>
      </div>
      
      <div class="cones-visualizer-container">
        <div class="visualizer-card">
          <div class="visualizer-header">
            <div class="header-title">
              <span class="title-text">桩桶可视化</span>
              <div class="statistics">
                <div class="stat passed">
                  <div class="stat-value">5</div>
                  <div class="stat-label">已通过</div>
                </div>
                <div class="stat remaining">
                  <div class="stat-value">15</div>
                  <div class="stat-label">未通过</div>
                </div>
                <div class="stat online">
                  <div class="stat-value">18</div>
                  <div class="stat-label">在线</div>
                </div>
                <div class="stat offline">
                  <div class="stat-value">2</div>
                  <div class="stat-label">离线</div>
                </div>
              </div>
            </div>
            <div class="header-controls">
              <button class="header-control-btn reset-btn" title="重置桩桶状态">
                <i class="el-icon-refresh"></i>
              </button>
              <button class="header-control-btn edit-btn" title="切换编辑模式">
                <i class="el-icon-edit"></i>
              </button>
            </div>
          </div>
          
          <div class="visualizer-content">
            <div class="track-container">
              <div class="track-path"></div>
              <div class="track-start-label">起点</div>
              <div class="track-end-label">终点</div>
              <div class="skater-position" style="left: 25%; top: 50%;">
                <div class="skater-icon"></div>
              </div>
              
              <!-- 桩桶 - 调整位置使全部20个桩桶居中显示 -->
              <div class="cone-item passed" style="left: 2.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">1</div>
              </div>
              <div class="cone-item passed" style="left: 7.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">2</div>
              </div>
              <div class="cone-item passed" style="left: 12.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">3</div>
              </div>
              <div class="cone-item passed" style="left: 17.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">4</div>
              </div>
              <div class="cone-item passed" style="left: 22.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">5</div>
              </div>
              <div class="cone-item missed" style="left: 27.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">6</div>
              </div>
              <div class="cone-item kicked" style="left: 32.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">7</div>
              </div>
              <div class="cone-item" style="left: 37.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">8</div>
              </div>
              <div class="cone-item" style="left: 42.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">9</div>
              </div>
              <div class="cone-item" style="left: 47.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">10</div>
              </div>
              <div class="cone-item" style="left: 52.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">11</div>
              </div>
              <div class="cone-item" style="left: 57.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">12</div>
              </div>
              <div class="cone-item" style="left: 62.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">13</div>
              </div>
              <div class="cone-item" style="left: 67.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">14</div>
              </div>
              <div class="cone-item" style="left: 72.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">15</div>
              </div>
              <div class="cone-item" style="left: 77.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">16</div>
              </div>
              <div class="cone-item" style="left: 82.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">17</div>
              </div>
              <div class="cone-item" style="left: 87.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">18</div>
              </div>
              <div class="cone-item offline" style="left: 92.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">19</div>
              </div>
              <div class="cone-item offline" style="left: 97.5%; top: 50%;">
                <div class="cone-body"></div>
                <div class="cone-effect"></div>
                <div class="cone-number">20</div>
              </div>
            </div>
          </div>
          
          <div class="visualizer-footer">
            <div class="legend">
              <div class="legend-item">
                <div class="legend-marker passed"></div>
                <span class="legend-text">已通过</span>
              </div>
              <div class="legend-item">
                <div class="legend-marker missed"></div>
                <span class="legend-text">漏桩</span>
              </div>
              <div class="legend-item">
                <div class="legend-marker kicked"></div>
                <span class="legend-text">踢桩</span>
              </div>
              <div class="legend-item">
                <div class="legend-marker no-receive"></div>
                <span class="legend-text">未检测</span>
              </div>
              <div class="legend-item">
                <div class="legend-marker online"></div>
                <span class="legend-text">在线</span>
              </div>
              <div class="legend-item">
                <div class="legend-marker offline"></div>
                <span class="legend-text">离线</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="final-result-text">
        <div class="result-section">
          <h3>最终成绩</h3>
          <div class="status-badge valid">有效</div>
          <div class="final-score-value">12.745</div>
          <div class="score-note">包含 2 个漏桩踢桩惩罚时间</div>
        </div>
      </div>
      
      <div class="records-section">
        <div class="records-title">成绩记录</div>
        <button class="simple-button">导出成绩记录</button>
        
        <table class="records-table">
          <thead>
            <tr>
              <th>时间</th>
              <th>原始用时</th>
              <th>漏桩踢桩数</th>
              <th>罚时</th>
              <th>最终成绩</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>2023-05-24 14:32:25</td>
              <td class="time-value">12.345</td>
              <td>2</td>
              <td class="penalty-value">+0.4</td>
              <td class="final-score">12.745</td>
              <td class="status">有效</td>
              <td><button class="delete-btn">删除</button></td>
            </tr>
            <tr>
              <td>2023-05-24 14:28:17</td>
              <td class="time-value">13.768</td>
              <td>0</td>
              <td class="penalty-value">+0.0</td>
              <td class="final-score">13.768</td>
              <td class="status">有效</td>
              <td><button class="delete-btn">删除</button></td>
            </tr>
            <tr>
              <td>2023-05-24 14:24:05</td>
              <td class="time-value">11.987</td>
              <td>3</td>
              <td class="penalty-value">+0.6</td>
              <td class="final-score">12.587</td>
              <td class="status">有效</td>
              <td><button class="delete-btn">删除</button></td>
            </tr>
            <tr>
              <td>2023-05-24 14:20:42</td>
              <td class="time-value">12.456</td>
              <td>5</td>
              <td class="penalty-value">+1.0</td>
              <td class="final-score invalid">无效</td>
              <td class="status invalid">无效</td>
              <td><button class="delete-btn">删除</button></td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
  </div>
</body>
</html> 